---
title: Tailwind CSS Range Slider for React - Material Tailwind
description: Customise your web projects with our range slider component for Tailwind CSS and React using Material Design guidelines.
navigation: [
  "slider", 
  "slider-sizes", 
  "slider-colors", 
  "slider-with-custom-styles",
  "more-examples",
]
github: slider
prev: select
next: speed-dial
---

<DocsTitle href="slider">
# Tailwind CSS Range Slider - React
</DocsTitle>

Use our Tailwind CSS <Code>Slider</Code> component in your web projects. The <Code>Slider</Code> can be used for adjusting settings such as volume, brightness, or applying image filters.

See below our beautiful <Code>Slider</Code> example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.

<br />

<CodePreview component={<SliderExamples.DefaultSlider />}>
```jsx
import { Slider } from "@material-tailwind/react";

export function DefaultSlider() {
  return (
    <div className="w-96">
      <Slider defaultValue={50} />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="slider-sizes">
## Slider Sizes
</DocsTitle>

The <Code>Slider</Code> component comes with 3 different sizes, that you can change it using the <Code>size</Code> prop.

<CodePreview component={<SliderExamples.SliderSizes />}>
```jsx
import { Slider } from "@material-tailwind/react";

export function SliderSizes() {
  return (
    <div className="flex w-96 flex-col gap-8">
      <Slider size="sm" defaultValue={50} />
      <Slider size="md" defaultValue={50} />
      <Slider size="lg" defaultValue={50} />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="slider-colors">
## Slider Colors
</DocsTitle>

The <Code>Slider</Code> component comes with 19 different colors that you can change it using the <Code>color</Code> prop.

<CodePreview component={<SliderExamples.SliderColors />}>
```jsx
import { Slider } from "@material-tailwind/react";

export function SliderColors() {
  return (
    <div className="flex w-96 flex-col gap-8">
      <Slider color="blue" defaultValue={50} />
      <Slider color="red" defaultValue={50} />
      <Slider color="green" defaultValue={50} />
      <Slider color="amber" defaultValue={50} />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="slider-with-custom-styles">
## Slider with Custom Styles
</DocsTitle>

You can use the <Code>className</Code> prop to add custom styles to the <Code>Slider</Code> component.

<CodePreview component={<SliderExamples.SliderCustomStyles />}>
```jsx
import { Slider } from "@material-tailwind/react";

export function SliderCustomStyles() {
  return (
    <div className="w-96">
      <Slider
        defaultValue={50}
        className="text-[#2ec947]"
        barClassName="rounded-none bg-[#2ec946]"
        thumbClassName="[&::-moz-range-thumb]:rounded-none [&::-webkit-slider-thumb]:rounded-none [&::-moz-range-thumb]:-mt-[4px] [&::-webkit-slider-thumb]:-mt-[4px]"
        trackClassName="[&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:bg-transparent rounded-none !bg-[#2ec946]/10 border border-[#2ec946]/20"
      />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="more-examples">
## Explore More Tailwind CSS Examples
</DocsTitle>
Check out more slider examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>.
